{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 修改密码{% endblock %}
{% block content %}
        <style type="text/css">
        *{box-sizing: border-box}
    </style>
<!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">密码管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">用户管理</li>
                <li class="breadcrumb-item active"><a href="{% url 'login:user_pwd_modify' %}">密码修改</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
<section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div class="card card-info">      <!--蓝绿色标题背景-->
                        <div class="card-header">
                            <h3 class="card-title">修改密码</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" style="color: #007bff">原密码</label>
                                <div class="col-sm-9">
                                    <input  class="form-control" type="password" name="pwd" id="pwd" value="{{ user.pwd }}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" style="color:  green">新密码</label>
                                <div class="col-sm-9">
                                    <input  class="form-control" type="password" id="pw1" name="pw1" onKeyUp="passwordChangeStatuss(this.value);" onBlur="passwordChangeStatuss(this.value);"><span></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" style="color:  green">密码强度</label>
				                <div class="col-sm-9 layui-btn-group pwd-item ">
					                <label id="l" class="layui-btn layui-btn-primary" style="width: 33.34%;">低</label>
					                <label id="m" class="layui-btn layui-btn-primary " style="width: 33.3%;">中</label>
					                <label id="h" class="layui-btn layui-btn-primary" style="width: 33.3%;"s>高</label>
				                </div>
			                </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" style="color:  green">确认密码</label>
                                <div class="col-sm-9 js-pw2">
                                    <input  class="form-control" type="password" id="pw2" name="pw2"><span></span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input class="btn btn-info" type="submit" id="submit" value="提交"/>
                            <button class="btn btn-default float-right" type="button" onclick="btn_cancel()">取消</button>
                        </div>
                </div>
            </div>
            </div>
        </div>
</section>
{% block custom_js %}
    <script src="{% static 'static/js/check.js' %}"></script>
    <script>
        function btn_cancel() {
            location.href = "/";
        }
    </script>
    <script>
    //ajax提交
    $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    $(document).ready(function () {
        $("#submit").click(function () {
            //验证用户所有输入是否有效，有效则提交后台注册
            msg  = ''
            pw1 = $("#pw1").val()
            pw2 = $("#pw2").val()
            if(checkpasswd(pw1,pw2)){
                //所有输入检查通过，提交数据
                $.ajax({
                    url: '{% url 'login:user_pwd_modify' %}',
                    type: 'POST',
                    data: {
                        'pwd': $("#pwd").val(),
                        'pw1': $("#pw1").val(),
                        'pw2': $("#pw2").val(),
                    },
                    //请求成功后执行提醒
                    success: function (data) {
                        //弹窗告警
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            layer.msg(data.info, function(){
                                if (data.status == 1){
                                    location.href = "{% url 'login:user_logout' %}";
                                }
                            });
                        })
                        }
                    })
                    }
    })})
    </script>
{% endblock %}
{% endblock %}
